<template>
  <div>
    <home/>
    <div style="height: 100%">
      <el-card style="height: 18.18vh" :body-style="{'padding': '0px'}">
        <div style="display: flex;margin-left: 15%;margin-top: 10px">
          <div>
            <el-image style="width: 100px;height: 100px;" :src="item.projectImg"/>
          </div>
          <div style="margin-left: 10px">
            <div class="title">{{ item.title }}</div>
            <div style="font-size: 13px;margin-top: 10px">
              {{ item.address }}
            </div>
            <el-tag style="font-size: 11px;margin-top: 10px" type="primary">{{ item.protype }}</el-tag>
          </div>
        </div>
        <el-tabs style="margin-left: 15%" v-model="activeName" class="custom-tabs" @tab-click="handleClick">
          <el-tab-pane label=项目信息 name="first"/>
          <el-tab-pane label="团队信息" name="second"/>
        </el-tabs>
      </el-card>
      <el-card v-if="activeName === 'first'" class="text-zhe" header-class="custom-header" :body-style="{'padding': '0px'}">
        <template #header>
            <span><el-icon><DocumentCopy/></el-icon>项目信息</span>
            <el-button text type="success" @click="isDisplay=true">项目封面</el-button>
        </template>
        <div>
          <div class="content">
            项目简介
          </div>
          <div style="padding: 10px" v-html="item.content"></div>
        </div>
        <div class="content">
          项目进展
        </div>
          <el-tag style="margin-left: 13px;margin-bottom: 10px;margin-top: 5px" type="success">
            {{ item.statuss }}
          </el-tag>
        <template #footer>
          <div v-if="item.file" style="margin-left: 15px;">
            <span>附件：</span>
            <div class="file">
              <el-button :disabled="item.download===1" @click="FileDownload(item.file)" style="margin-left: 44%" link>
                <el-icon size="25">
                  <Document/>
                </el-icon>
              </el-button>
              <el-button :disabled="item.download===1" @click="FileDownload(item.file)" link
                         style="display: block;font-size: 13px;margin-left: 38%">
                附件.rar
              </el-button>
            </div>
          </div>
        </template>
      </el-card>
      <el-card v-if="activeName ==='second'" class="text-zhe" :body-style="{'padding': '0px'}">
        <template #header>
          <el-image :src="MemberSvg" style="width: 20px;height: 20px" />
          <span style="height: 20px;margin-left: 10px;margin-top: -10px">团队信息</span>
        </template>
          <div v-if="isMember" class="member-container">
            <el-card shadow="hover" :body-style="{'padding': '0px'}" v-for="(member, index) in projectMemberData" style="display: block;width: 100%">
              <div style="display: flex; align-items: center; padding: 10px;">
                <el-image :src="member.headUrl" style="width: 60px; height: 60px; border-radius: 50%; margin-right: 10px;" />
                <div>
                  <div class="member-name" style="display: flex">
                    <span style="font-weight: bold;">{{ member.realName }}</span>
                    <div class="member-type">{{ index===0?'负责人':'指导老师' }}</div>
                  </div>
                  <div class="member-school">{{ member.address }}</div>
                  <div class="member-school" v-if="!member.isEditing" style="margin-top: 0px">{{ member.manifesto }}</div>
                  <div v-if="member.isEditing">
                    <el-input
                      v-model="member.manifesto"
                      style="width: 480px;display: block"
                      :rows="2"
                      maxlength="40"
                      show-word-limit
                      type="textarea"
                      placeholder="请输入您的宣言"
                    />
                    <el-button style="margin-top: 3px;" size="small" @click="editMember(member)" type="primary">保存</el-button>
                    <el-button style="margin-top: 3px;" size="small" @click="member.isEditing=false" type="danger">取消</el-button>
                  </div>
                </div>
                <el-button v-if="(useUserStore().userInfo.id===member.id ||
                 useUserStore().userInfo.id===item.teacherId) && !member.isEditing " class="text-button" @click="manifestoEdit(member)" :icon="EditPen" circle></el-button>
              </div>
            </el-card>
            <el-card shadow="hover" :body-style="{'padding': '0px'}" v-for="(member, index) in teamMembers"
                     :key="index" class="member-card">
              <div style="display: flex; align-items: center; padding: 10px;">
                <el-image :src="member.headUrl" style="width: 60px; height: 60px; border-radius: 50%; margin-right: 10px;" />
                <div style="width: 70%">
                  <div class="member-name" style="display: flex">
                    <span style="font-weight: bold;">{{ member.realName }}</span>
                    <div class="member-type">团队成员</div>
                  </div>
                  <div class="member-school">{{ member.address }}</div>
                  <div class="member-manifesto">{{ member.manifesto }}</div>
                </div>
              </div>
            </el-card>
          </div>
        <div v-else style="height: 10vh;margin-top: 20px;font-size: 15px">
          <span style="color: #999;margin-left: 20px">查看相关信息，请认证指导老师、管理员、团队成员身份。</span>
        </div>
      </el-card>
      <el-dialog v-model="isDisplay" title="项目封面" width="1000">
        <img :src="item.projectImg" style="width: 100%;height: 100%"/>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {getFile,getUserInfoText,getMemberInfoData} from "../welcome/welcomeApi.js";
import {ElMessage} from "element-plus";
import home from '../welcome/Home.vue';
import {ref, onMounted} from "vue";
import {useUserStore} from '@/pinia/stores/user'
import MemberSvg from "../welcome/image/member.svg"
import {EditPen} from "@element-plus/icons-vue";
const isDisplay = ref(false);
const isMember = ref(false);
const item = ref('');
const createTime = ref('');
const downloadBtn = true;
const fileUrl = ref('');
const htmlContent = ref('');
const activeName = ref('first');
const projectMemberList = ref([]);
const FileDownload = async (data) => {
  let fileName = data;
  await getFile(fileName).then(res => {
    console.log(res);
    if (res.code === 1) {
      ElMessage.error("文件不存在");
    } else {
      let fileUrl = 'http://localhost:8082/static/img/real/' + fileName;
      let extName = fileUrl.substring(fileUrl.lastIndexOf("."));
      const link = document.createElement('a');
      link.download = fileName + extName;
      link.href = fileUrl;
      link.target = "_blank";
      link.style.display = 'none';
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
    }
  }).catch(error => {
    console.log(error);
  });
}
const projectMemberData = ref({})
const channel = new BroadcastChannel('projectData');
channel.addEventListener('message', (event) => {
  item.value = event.data;
  activeName.value = 'first';
  isProjectMember();
});
const handleClick = (tab, event) => {
  activeName.value = tab.props.name;
  if (tab.props.name ==='second'){
    getMemberInfo();
  }
}
const isProjectMember = () => {
  let menber = item.value.menber.split(",");
  let user = useUserStore().userInfo
  if (menber.includes(user.username) || user.occupation === 2 ||
    user.id === item.value.teacherId || user.id === item.value.userId) {
    isMember.value = true;
    projectMemberList.value = menber;
    projectMemberList.value.push(item.value.username);
    projectMemberList.value.push(item.value.instructor);
  }
}
const teamMembers = ref([])
const getMemberInfo = async () => {
  if (isMember.value){
    await getMemberInfoData(projectMemberList.value).then(res => {
      for (let i = 0; i < res.data.length; i++) {
        res.data[i].manifesto = getUserInfoText(res.data[i],false);
      }
      teamMembers.value = res.data.slice(0,res.data.length-2);
      projectMemberData.value=res.data.slice(res.data.length-2,res.data.length)
      for (let i = 0; i < projectMemberData.value.length; i++) {
        projectMemberData.value[i].isEditing = false;
      }
    })
  }
}
const manifestoEdit = (member) => {
  member.isEditing = true;
}
const editMember = (member) => {
  getUserInfoText(member,true);
  member.isEditing = false;
}

onMounted(() => {
  if (localStorage.getItem('projectData')) {
    item.value = JSON.parse(localStorage.getItem('projectData'))
  }
  isProjectMember();
  activeName.value = 'first';
});
</script>

<style scoped>
.title {
  text-align: center;
  font-size: 25px;
}

.text-zhe {
  margin-top: 10px;
  width: 70%;
  margin-left: 15%;
}

.content {
  margin-left: 10px;
  padding-top: 10px;
  font-size: 15px;
  font-weight: bold;
}

.file {
  width: 200px;
  height: 60px;
  border: 2px solid #efefef;
  border-radius: 8px;
}


/* 去掉 el-tabs 的默认横线 */
.custom-tabs >>> .el-tabs__nav-wrap::after {
  background-color: transparent !important; /* 去掉横线 */
}

/* 去掉每个标签的边框 */
.custom-tabs >>> .el-tabs__item {
  border: none !important; /* 去掉标签的边框 */
  padding: 10px 10px !important; /* 调整标签的内间距 */
  font-size: 12px !important; /* 调整字体大小 */
}

/* 选中标签时的样式 */
.custom-tabs >>> .el-tabs__item.is-active {
  color: #1890ff !important; /* 选中标签的字体颜色 */
  border-bottom: 2px solid #1890ff !important; /* 添加底部下划线 */
}
.el-card .el-card__header {
  padding: 0; /* 去掉默认的内边距 */
}
.member-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px;
}

.member-card {
  width: calc(33.33% - 8px); /* 三列布局，留出间隙 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.member-name {
  font-size: 16px;
}

.member-type {
  margin-left: 15px;
  font-size: 13px;
  margin-top: 10px;
  color: #999;
}

.member-school {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}
.member-manifesto {
  margin-top: 0;
  font-size: 12px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  width: 100%; /* 确保有一个宽度限制，否则文本不会被截断 */
  color: #999;
}
.text-button {
  display: flex;
  border: none;
  justify-content: flex-end; /* 将子元素向右对齐 */
  align-items: center; /* 垂直居中对齐 */
  margin-left: auto; /* 确保按钮在右侧 */
  margin-top: -60px;
}
.text-button:hover {
  background-color: #fff;
}
</style>
